body,
div,
span,
a,
p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

#app {
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
    position: relative;
    background: transparent;
    /* 确保 #app 本身没有背景 防止app长按图片弹框出现*/
}

#app::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/imgs/home/public_bg.webp');
    z-index: -1;
    pointer-events: none;
    background-size: 40%;
}

input {

    &:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #fff !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s;
    }

    color: #fff;
}

input::placeholder,
textarea::placeholder,
select,
.input-text::placeholder {
    color: #A8A8CA !important;

    &:focus-visible {
        border: 0;
    }
}

a:focus,
input:focus,
p:focus,
div:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-modify: read-write-plaintext-only;
}

// 修改ui框架默认样式
:root {
    --nut-cell-group-background-color: transparen;
    --nut-button-default-bg-color: transparen;
    --nut-cell-background: transparen;
    --nut-cell-padding: 10px 0;
    --nut-cell-color: #c0c2db;
    --nut-tabbar-height: 60px;
    --nut-tabs-titles-item-color: #8e82c2;
    --nut-tabs-titles-item-active-color: #fff;
    --nut-tabs-horizontal-titles-item-active-line-width: 0;
    --nut-elevator-list-item-code-font-color: #a2a5de;
    --nut-elevator-list-item-bars-background-color: transparent;
    --nut-elevator-list-item-bars-inner-item-font-size: 14px;
    --nut-grid-item-content-padding: 0;
}

.nut-cell {
    padding: 4px 0 !important;
}

.nut-popover .nut-popover-content {
    box-shadow: none;
}

.nut-dialog {
    width: 347px !important;
    border-radius: 16px !important;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    padding: 32px 20px !important;

    .nut-dialog__header {
        color: #FFF;
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
    }

    .nut-dialog__content {
        color: #FFF;
        font-size: 12px;
        font-weight: 400;
        margin: 20px 0 !important;
    }

    .nut-button {
        border-radius: 8px !important;
        background: #282747 !important;
        box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset !important;
        height: 44px;
        color: #FFF;
        font-size: 14px;
        font-weight: 500;
        width: 146px;
        box-sizing: border-box;
    }

    .nut-dialog__footer-ok {
        max-width: 146px;
        background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%) !important;
        box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset !important;
    }
}

.nut-menu {
    width: 131px;

    // border-radius: 5px;

    .nut-menu__bar {
        background: none !important;
        line-height: normal !important;
        border-radius: 5px;

        .nut-menu__item {
            color: #fff !important;

            .nut-menu__title-icon {
                padding-right: 5px;
            }
        }

        .nut-menu__title {
            height: 24px;
            justify-content: space-between !important;
        }
    }
}

.nut-navbar {
    width: 355px;
    height: 44px;
    left: 50%;
    transform: translateX(-50%);
    //top: 5.5px;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    background-color: transparent;
    box-shadow: unset;
    // border-radius: 12px;
    // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);
    // background-image: radial-gradient(farthest-corner at 50% 8%, #4c36b3 0%, #3a2786 50%, #3c279a 100%)
}


.nut-tabs__titles-item__text {
    font-size: 14px;
}

.nut-tabs .nut-tabs__titles {
    padding: 5px;
    background: unset !important;
    // border-radius: 14px !important;
    // box-shadow: inset 0 -6px 6px 0 #5e42dd, 0 4px 4px 0 rgba(22, 17, 46, 0.3), inset 0 6px 6px 0 #1f1548 !important;
    // border: 2.5px solid transparent !important;

    // background-clip: padding-box, border-box !important;
    // background-origin: padding-box, border-box !important;
    // background-image: linear-gradient(to bottom, #4017a8 100%, #8256f2 0%), linear-gradient(180deg, #4017a8, #8256f2) !important;
    margin-bottom: 15px;

    .nut-tabs__titles-item {
        font-size: 12px;
        color: #C6C4F5 !important;

        // font-weight: bold;
        &.active {
            color: #5B6CFF !important;
            // height: 34px;
            font-weight: 500;
            font-size: 12px;
            position: relative;
            // width: 100%;

            &::after {
        
                position: absolute;
                content: '';
                width: 40%;
                height: 2px;
                background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
                border-radius: 2px;
                bottom: 0px;


            }


        }
    }
}

.nut-button--primary {
    background: none !important;
}

.nut-tab-pane {
    padding: 0 !important;
    background-color: transparent !important;
    // height: auto!important;
}

.nut-navbar__left {
    padding: 0 6px;
}

.nut-tabs .nut-tabs__titles .nut-navbar {
    width: 355px;
    height: 45px;
    margin: 0 auto 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    // border-radius: 12px;
    // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);
    // background-image: radial-gradient(#4c36b3 0%, #3a2786 100%, #3c279a 25%);

}

// 公共样式
.btn_block {
    border-image: url('/imgs/btn/blockBtn.webp') 0 30 0 30 fill / 0px 15px stretch stretch !important;
    box-shadow: 0 2px 4px 0 #241760;
    border-radius: 12px !important;
    color: #fff !important;
}

.btn_inline {
    border-image: url('/imgs/btn/inlineBtn.webp') 0 35 0 35 fill / 0px 20px stretch stretch !important;
    box-shadow: 0 1px 2px 0 #241760;
    border-radius: 12px !important;
    color: #fff !important;
}


.overlay_body {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.overla_content {
    display: flex;

    align-items: center;
    justify-content: center;
}

.nut-tabbar-item_icon-box_icon {
    display: block;

}



@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


// .pop_class {
//     z-index: 99 !important;
//     background-color: transparent !important;
//     height: 0;
//     opacity: 0;
//     left: 50% !important;
//     transform: translateX(-50%) !important;

// }

// .heart {
//     height: 185px !important;
//     opacity: 1 !important;

// }

// 公共按钮颜色
.button_color {
    width: 120px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%) !important;
}

.txt_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 16px !important;
}

.swiper-pagination-bullet {

    background: #C7C5F4 !important;
}

.swiper-pagination-bullet-active {
    border-radius: 8px !important;
    width: 25px !important;
    background: #5751AB !important;

}

.nut-toast {
    z-index: 999999999 !important;
}

// tel 输入框密文明文切换
.txt_password {
    -webkit-text-security: disc;
}

.home_game_cube .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active::after {
    position: absolute;
    content: '';
    width: 45%;
    height: 10px;
    // background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
    // border-radius: 2px;
    background-image: url('./ativebar.svg');
    bottom: 0px;
}


.popover-box {
    .nut-popover-arrow {
        display: none;
    }

    .popover-content {
        background: #131232;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
        color: #fff;
    }
}

.popup-com {
    border-radius: 16px !important;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset !important;
    left: 14px !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    background: #131232 !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
}


.nut-range-button-wrapper {
    // right: 15px !important;
}

.nut-range-button-wrapper[aria-valuenow="0"] {
    right: -15px !important;
}

.nut-range-button-wrapper[aria-valuenow="1"],
.nut-range-button-wrapper[aria-valuenow="2"],
.nut-range-button-wrapper[aria-valuenow="3"],
.nut-range-button-wrapper[aria-valuenow="4"],
.nut-range-button-wrapper[aria-valuenow="5"] {
    right: -10px !important;
}

.nut-range-button-wrapper[aria-valuenow="6"],
.nut-range-button-wrapper[aria-valuenow="7"],
.nut-range-button-wrapper[aria-valuenow="8"],
.nut-range-button-wrapper[aria-valuenow="9"],
.nut-range-button-wrapper[aria-valuenow="10"] {
    right: -5px !important;
}

.nut-range-button-wrapper[aria-valuenow="100"] {
    right: 15px !important;
}

.nut-range-button-wrapper[aria-valuenow="99"],
.nut-range-button-wrapper[aria-valuenow="98"],
.nut-range-button-wrapper[aria-valuenow="97"],
.nut-range-button-wrapper[aria-valuenow="96"],
.nut-range-button-wrapper[aria-valuenow="95"] {
    right: 10px !important;
}

.nut-range-button-wrapper[aria-valuenow="94"],
.nut-range-button-wrapper[aria-valuenow="93"],
.nut-range-button-wrapper[aria-valuenow="92"],
.nut-range-button-wrapper[aria-valuenow="91"],
.nut-range-button-wrapper[aria-valuenow="90"] {
    right: 5px !important;
}